import React, {useEffect} from 'react';

import * as echarts from 'echarts';
import mapJson from './map.json';

let myChart;
export default function index() {
  
  useEffect(()=>{
    initMap();
  },[]);

  const initMap = () => {
    echarts.registerMap('maoming', mapJson);
    myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{b}'
      },
      geo: {
        map: 'maoming',
        emphasis: {
          itemStyle: {
            areaColor: '#389BB7'
          }
        },
        regions: [
          {
            name: '茂南区',
            label: {
              show: true
            },
            itemStyle: {
              normal: {
                areaColor: '#C78296'
              }
            }
          },
          {
            name: '信宜市',
            label: {
              show: true
            },
            itemStyle: {
              normal: {
                areaColor: '#F6CD46'
              }
            }
          },
          {
            name: '电白区',
            label: {
              show: true
            },
            itemStyle: {
              normal: {
                areaColor: '#EEA328'
              }
            }
          },
          {
            name: '化州市',
            label: {
              show: true
            },
            itemStyle: {
              normal: {
                areaColor: '#C7D46F'
              }
            }
          },
          {
            name: '高州市',
            label: {
              show: true
            },
            itemStyle: {
              normal: {
                areaColor: '#D75A4A'
              }
            }
          }
        ]
      },
      series: [
        {
          type: 'effectScatter',
          name: 'maoming',
          coordinateSystem: 'geo',
          geoIndex: 0,
          zlevel: 1,
          symbol: 'circle',
          hoverAnimation: true,
          legendHoverLink: true,
          symbolSize: 10,
          data: [
            {
              name: '高新区',
              value: [110.998874, 21.56981],
            },
            {
              name: '水东湾新城',
              value: [111.053948, 21.467845],
              label:{
              position: [-30,0]
              }
            },
            {
              name: '滨海新区',
              value: [111.305333, 21.465555]
            }
          ],
          itemStyle: {
            color: 'transparent',
          },
          label:{
            show:true,
            color:'#000',
            formatter:'{b}',
            fontSize:'10px'
          },
          effectType: 'ripple'
        }
      ]
    });
  };

  const divStyle = {
    width: 600,
    height: 400
  };

  return (
    <div id="main" style={divStyle}></div>
  )
}
